<!doctype html>

<html lang="en">
<head>
	<title>Polar Lines  - toxiclibs.js examples</title>
	<meta name="author" content="Kyle Phillips">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!-- Date: 2011-01-09 -->
	<script type="text/javascript" src="../build/toxiclibs.js"></script>
	<script type="text/javascript" src="js/processing.js"></script>
</head>
<body class="container_12">
<header class="grid_12">
	<hgroup>
		<h1>ToxiclibsSupport 2D</h1>
		<h2>w/ <a href="http://processingjs.org">Processing.js</a></h2>
	</hgroup>
</header>

<script id="code" type="text/processing" data-processing-target="myCanvas">
/**
 * PolarLines demo shows the difference between lines in normal cartesian
 * and polar coordinate systems, where a line is actually a curve/spiral.
 * Both "lines" are shown in parallel and the only difference is the order
 * of the .toCartesian() conversion (either inside or outside the loop).
 *
 * Usage: move mouse to adjust line endpoint
 */

/* 
 * Copyright (c) 2006-2008 Karsten Schmidt
 * 
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 * 
 * http://creativecommons.org/licenses/LGPL/2.1/
 * 
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */


var Vec2D = toxi.geom.Vec2D,
    ToxiclibsSupport = toxi.processing.ToxiclibsSupport,
    Ellipse = toxi.geom.Ellipse,
    Circle = toxi.geom.Circle,
    Polygon2D = toxi.geom.Polygon2D,
    Rect = toxi.geom.Rect,
    Triangle2D = toxi.geom.Triangle2D,
    Line2D = toxi.geom.Line2D;

import toxi.geom.*;


ToxiclibsSupport gfx;
Circle circ;
Ellipse ellipse;
Vec2D[] lineStrip2d;
Line line;
Polygon2D poly;
Rect toxiRect;
Triangle2D tri;

void setup() {
  size(640,560,OPENGL);
  
  Vec2D center = new Vec2D(width/2,height/2);
  frameRate(15);
  gfx = new ToxiclibsSupport(this);
  circ = new Circle(center,100);
  ellipse = new Ellipse(center,new Vec2D(100,50));
  line = new Line2D(Vec2D.randomVector().scaleSelf(width),Vec2D.randomVector().scaleSelf(height));
  lineStrip2d = new Vec2D[25];
  for(int i =0;i<25;i++){
  	lineStrip2d[i] = Vec2D.randomVector().scaleSelf(width,height);
  }
  
  Vec2D[] vertices = new Vec2D[8];
  float angleStep = (TWO_PI/8);
  float rad = 75;
  for(int j=0;j<8;j++){
  	vertices[j] = new Vec2D(cos(angleStep*j)*rad,sin(angleStep*j)*rad).addSelf(center);
  }
  poly = new Polygon2D(vertices);
  toxiRect = new Rect(width/2,height/2,100,100);
  
  tri = new Triangle2D(new Vec2D(-100,-100).addSelf(center), new Vec2D(0,0).addSelf(center), new Vec2D(100,-100).addSelf(center));
}

void draw() {
  background(0);
  strokeWeight(1);
  fill(255,255,0);
  gfx.circle(circ,circ.getRadius());
  fill(255,255,255);
  gfx.ellipse(ellipse);
  stroke(255);
  gfx.line(line);
  noFill();
  stroke(255,0,0);
  gfx.lineStrip2D(lineStrip2d);
  strokeWeight(10);
  gfx.points2D(lineStrip2d);
  noStroke();
  fill(255,0,0);
  //gfx.polygon2D(poly);
  gfx.rect(toxiRect,CORNER);
  fill(0,255,0);
  gfx.triangle(tri);
 }

</script>
<script>
	var code = document.getElementById("code").innerHTML;
	console.log(Processing.compile(code).sourceCode);
</script>
<div class="grid_12">
<canvas id="myCanvas" width="200" height="200">
	your browser doesnt support canvas
</canvas>
</div>
<section id="details" class="grid_12">
<aside id="authors" class="grid_6">
<p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
	Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a>
</p>
</aside>
<article id="description" class="grid_12">
<p>PolarLines demo shows the difference between lines in normal cartesian and polar coordinate systems, where a line is actually a curve/spiral. Both "lines" are shown in parallel and the only difference is the order of the .toCartesian() conversion (either inside or outside the loop).</p>
</article>
</section>
<footer class="grid_12"><a href="http://haptic-data.com">toxiclibs.js
</a></footer>
</body>
</html>
